import React, { Component } from 'react'
import axios from 'axios'

export default class Search extends Component {
	keyWord = React.createRef()
	render() {
		return (
			<section className="jumbotron">
				<h3 className="jumbotron-heading">Search Github Users</h3>
				<div>
					<input ref={this.keyWord} type="text" placeholder="enter the name you search"/>&nbsp;
					<button onClick={this.search}>Search</button>
				</div>
			</section>
		)
	}

	search = ()=>{
		//获取用户输入(连续解构赋值+重命名，不推荐这么写，只是让大家了解一下)
		const {current:{value:kw}} = this.keyWord
		console.log(kw)
		//请求前通知App更新自己的状态
		this.props.getSearchInfo({users:[],isFirst:false,isLoading:true,errMsg:''})
		//发送请求
		axios.get('https://api.github.com/search/users',{params:{q:kw}}).then(
			response => {
				console.log('请求成功了',response.data.items)
				//请求成功了通知App更新自己的状态
				this.props.getSearchInfo({users:response.data.items,isLoading:false,errMsg:''})
			},
			error => {
				console.log('请求失败了',error.message)
				//请求失败了通知App更新自己的状态
				this.props.getSearchInfo({users:[],isLoading:false,errMsg:error})
			}
		)
	}
}
